<template>
	<view class="userCenter">
		<u-navbar title="我的" :leftIcon="null" bgColor="transparent" :border="false" :placeholder="true"></u-navbar>
		<view class="user" @click="login">
			<u-avatar :src="userData.avatar ? userData.avatar : '/static/main/cs01.jpg'" size="45"></u-avatar>
			<view class="userName">
				<view class="name">{{ userData.nickName ?  userData.nickName  : '未登录'  }}</view>
				<view class="text">凭信用0押金就可以租手机</view>
			</view>
		</view>
		<view class="gird">
			<view class="girdtitle">
				<view class="girdtitle_left">
					<text>我的订单</text>
				</view>
				<view class="girdtitle_right" @click="gopage('allOrder',0)">
					查看全部
					<u-icon class="icon" size="12" name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="girdContent">
				<view class="girdContenti" v-for="(item, index) in girdContentArr1" :key="index"
					@click="gopage('allOrder',index+1)">
					<view class="image">
						<image :src="item.image" style="width: 50rpx; height: 50rpx" mode=""></image>
					</view>
					<text>{{ item.text }}</text>
				</view>
			</view>
		</view>
		<view class="cell-group">
			<view class="cell-item" v-for="(item, index) in girdContentArr" :key="index" @click="gopage(item.url)">
				<view class="left">
					<image :src="item.image" style="width: 48rpx; height: 48rpx" alt="icon" class="icon"></image>
					<view class="title">{{ item.text }}</view>
				</view>
				<u-icon name="arrow-right" size="20"></u-icon>
			</view>
		</view>

	<!-- 	<view @click="login" class="login">点我登录</view>
		<view @click="getInfo" class="login">点我获取用户信息</view> -->
	</view>
</template>

<script>
	import api from '../api/index.js';
	import main from '../api/main.js';
	import {
		toast
	} from '@/utils/common';
	export default {
		data() {
			return {
				userData: {},
				Image: require('../static/userCenter/Frame (22).png'),
				girdContentArr: [{
						image: require('../static/userCenter/Frame (22).png'),
						text: '我的收藏',
						url: 'collect'
					},
					{
						image: '/static/userCenter/Frame (22).png',
						text: '隐私服务',
						url: 'privacy'
					},
					{
						image: '/static/userCenter/Frame (23).png',
						text: '收货地址',
						url: 'address'
					},
					{
						image: '/static/userCenter/Frame (24).png',
						text: '关于我们',
						url: 'AboutUs'
					},
					{
						image: '/static/userCenter/Frame (25).png',
						text: '实名认证',
						url: 'realName'
					}
				],
				girdContentArr1: [{
						image: '/static/userCenter/Frame (15).png',
						text: '待下单',
						url: 'collection'
					},
					{
						image: '/static/userCenter/Frame (16).png',
						text: '待发货',
						url: 'privacy'
					},
					{
						image: '/static/userCenter/Frame (17).png',
						text: '待收货',
						url: 'address'
					},
					{
						image: '/static/userCenter/Frame (18).png',
						text: '租用中',
						url: 'AboutUs'
					},
					{
						image: '/static/userCenter/Frame (19).png',
						text: '审核中',
						url: 'realName'
					},
					{
						image: '/static/userCenter/Frame (20).png',
						text: '已逾期',
						url: 'realName'
					},
					{
						image: '/static/userCenter/Frame (45).png',
						text: '已完成',
						url: 'realName'
					},
					{
						image: '/static/userCenter/Frame (46).png',
						text: '已取消',
						url: 'realName'
					},
				]
			};
		},
		methods: {
			getUserInfo() {
				//获取用户信息
				const data = {};
				main.getUserInfo()
					.then((res) => {
						console.log('获取用户信息', res);
						this.userData = res.user;
						console.log(this.userData)
					})
					.catch((erro) => {
						console.log(erro);
					});
			},
			gopage(type, status) {
				uni.navigateTo({
					url: '/subPages/mine/' + type + (status >= 0 ? '?status=' + status : '')
				});
			},
			login() {
				my.getAuthCode({
					scopes: 'auth_user', // 获取用户信息的固定写法
					success: (res) => {
						if (res.authCode) {
							//获取用户名，密码
							console.log(res);
							console.log(res.authCode);
							const data = {
								code: res.authCode,
								username: 'cs',
								password: '3123123123'
							};
							 let _this = this
							main.getAliLogin(data)
								.then((res) => {
									//本地存储token
									uni.setStorageSync('token', res.token);
									toast('登录成功');
								
									this.getUserInfo();
									console.log(res);
								})
								.catch((erro) => {
									console.log(erro);
								});

							// uni.request({
							// 	url: 'http://192.168.1.9:8081/aliLogin',
							// 	// url: `${api.getPathApi()}/aliLogin`,
							// 	method: 'POST',
							// 	data: data,
							// 	success: (res) => {
							// 		debugger
							// 		if (res.data.code === 200) {
							// 			//本地存储token
							// 			uni.setStorageSync('token', res.data.token);

						// 			toast('登录成功');
						// 			this.getInfo();
						// 		}
						// 		console.log(res);
						// 	},
						// 	fail: (erro) => {
						// 		console.log(erro);
						// 	}
						// });
					}
				}
			});
		},
	
	
	},
	onLoad() {
		// 获取环境信息
		// const envInfo = my.getEnvInfo();
		// 打印AppID
		// console.log('AppID:', envInfo.appId);
		console.log('获取环境信息', uni.getAccountInfoSync());
	},
	onShow() {
		//判断用户是否登录
	}
};
</script>

<style lang="scss" scoped>
	.login {
		width: 100%;
		text-align: center;
		background-color: red;
		margin-top: 10rpx;
	}

	.userCenter {
		width: 100%;
		height: 100vh;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #f8f9ff;
		color: #333;

		.user {
			width: 100%;
			height: 158rpx;
			display: flex;
			align-items: center;

			.userName {
				margin-left: 15rpx;

				.name {
					color: #333;
					font-size: 32rpx;
				}

				.text {
					color: #777;
					font-size: 24rpx;
				}
			}
		}

		.gird {
			border-radius: 15rpx;
			width: 100%;
			padding: 25rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 15rpx;

			.girdtitle {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 90rpx;

				.girdtitle_left {
					display: flex;
					align-items: center;
					font-size: 30rpx;
				}

				.girdtitle_right {
					font-weight: 400;
					font-size: 24rpx;
					display: flex;
					align-items: center;
				}

				.icon {
					margin: 0 5rpx;
				}
			}

			.girdContent {
				width: 100%;
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 15px;

				.girdContenti {
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: center;
					height: 94rpx;
					font-size: 26rpx;
				}
			}
		}

		.cell-item {
			width: 100%;
			background-color: #fff;
			border-radius: 15rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 20rpx 0;
			padding: 25rpx;
			box-sizing: border-box;

			.left {
				display: flex;
				align-items: center;
				font-size: 28rpx;

				image {
					margin-right: 15rpx;
				}
			}
		}
	}
</style>